<lv-collapse>
  <lv-collapse-panel [lvId]="'p1'" [lvTitle]="titleTpl">
    <p>This is content...</p>
    <p>This is content...</p>
  </lv-collapse-panel>
  <lv-collapse-panel [lvId]="'p2'" lvTitle="Expansion area stops spreading" [lvExtra]="extraTpl">
    <p>This is content...</p>
    <p>This is content...</p>
  </lv-collapse-panel>
  <lv-collapse-panel [lvId]="'p3'">
    <p>This is content...</p>
    <p>This is content...</p>
  </lv-collapse-panel>
</lv-collapse>

<ng-template #titleTpl>
  <span class="ui-title" (click)="$event.stopPropagation()">Custom title stops spreading</span>
</ng-template>

<ng-template #extraTpl>
  <div class="ui-extra">
    <p class="ui-description">Some description</p>
    <span lv-icon="lv-icon-link" class="extra-icon" lvColorState (click)="$event.stopPropagation()"></span>
  </div>
</ng-template>
